<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/4.3.1/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<div id="app">
    <h2>{{title}}</h2>
<add-item-component></add-item-component>
    <items-component></items-component>
<change-title-component></change-title-component>



</div>
<script>
    var data = {
        items:[{text:'Banana',checked:true},
            {text:'Apple',checked:false}],
        title:'My Shopping List',
        newItem:''
    };

    // declaring components
    var ItemsComponent = Vue.extend({
        data : function () {
            return data;
        },
        template:'    <ul>\n' +
            '        <li v-for="item in items" v-bind:class="{\'removed\':item.checked}">\n' +
            '            <div class="checkbox">\n' +
            '                <label>\n' +
            '                    <input type="checkbox" v-model="item.checked"/>\n' +
            '                    {{item.text}}\n' +
            '                </label>\n' +
            '            </div>\n' +
            '        </li>\n' +
            '    </ul>'
    });

    var ChangeTitleComponent = Vue.extend({
       data:function () {
           return data;
       } ,
        template:'<input v-model="title" />'
    });

    var AddItemComponent = Vue.extend({
        data:function () {
            return data;
        },
        methods:{
            addItem:function () {
                var text;
                text = this.newItem.trim();
                if (text) {
                    this.items.push({text:text,checked:false});
                    this.newItem="";
                }
            }
        },
        template:'    <div class="input-group">\n' +
            '        <input v-model="newItem" @keyup.enter="addItem"\n' +
            '               placeholder="add items here" type="text" class="form-control">\n' +
            '        <span class="inpuy-group-btn">\n' +
            '            <button @click="addItem" class="btn btn-default" type="button">ADD!</button>\n' +
            '        </span>\n' +
            '    </div>'
    });

    // register components
    Vue.component('items-component', ItemsComponent);
    Vue.component('change-title-component', ChangeTitleComponent);
    Vue.component('add-item-component', AddItemComponent);

    new Vue({
        el:'#app',
        data:data
    });
</script>
</body>
</html>